<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8" />
	<title>用户管理</title>
	<link type="text/css" th:href="@{/html/css/bootstrap.min.css}" rel="stylesheet" />
	<script type="text/javascript" th:src="@{/html/js/jquery-1.12.4.js}"></script>
	<script type="text/javascript" th:src="@{/html/js/bootstrap.min.js}"></script>
	<script type="text/javascript" th:src="@{/html/js/vue.min.js}"></script>
	<script type="text/javascript" th:src="@{/html/js/axios.min.js}"></script>
</head>
<body>
	<div id="app" class="container-fluid" style="margin-top: 10px;">
		<form class="form-inline" v-on:submit.prevent="onSubmit">
			<select v-model="role" class="form-control input-sm">
				<option value='0'>请选择角色</option>
				<option v-for="item in roleOpts" v-bind:value="item.rname">{{item.rnamezh}}</option>
			</select>
			<select v-model="status" class="form-control input-sm">
				<option value='0'>请选择状态</option>
				<option v-for="item in statusOpts" v-bind:value="item.dkey">{{item.dvalue}}</option>
			</select>
			<button class="btn btn-default glyphicon glyphicon-search btn-sm" v-on:click="list(0)"></button>
		</form>
		<table class="table">
			<thead>
				<tr>
					<th>头像</th>
					<th>用户名</th>
					<th>角色</th>
					<th>状态</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="item in pager.content">
					<td>
						<img v-if="item.role=='ROLE_SHOP'" class="img-thumbnail" style="height: 30px;" v-bind:src="'/mymall/logo/'+item.username" />
						<img v-else class="img-thumbnail" style="height: 30px;" v-bind:src="'/mymall/photo/'+item.username" />
					</td>
					<td>{{item.username}}</td>
					<td>{{item.roleVO.rnamezh}}</span></td>
					<td>{{item.dictVO.dvalue}}</td>
					<td v-if="item.role!='ROLE_ADMIN'">
						<button v-if="item.status==201" class="btn btn-default btn-sm">锁定</button>
						<button v-if="item.status==202" class="btn btn-default btn-sm">解锁</button>
						<button v-if="item.status==203" class="btn btn-default btn-sm" v-on:click="check(item.shopVO)">审核</button>
					</td>
				</tr>
			</tbody>
			<tfoot>
                <tr>
                    <td colspan="5">
                        <ul class="pagination">
                            <li><a href="#" @click.prevent="list(0)">&laquo;</a></li>
                            <li><a href="#" @click.prevent="list(pager.pageable.pageNumber-1)">&larr;</a></li>
                            <li v-for="n in end-begin+1" :class="pager.pageable.pageNumber==begin+n-2?'active':''">
                                <a href="#" @click.prevent="list(begin+n-2)">{{begin+n-1}}</a>
                            </li>
                            <li><a href="#" @click.prevent="list(pager.pageable.pageNumber+1)">&rarr;</a></li>
                            <li><a href="#" @click.prevent="list(pager.totalPages-1)">&raquo;</a></li>
                        </ul>
                    </td>
                </tr>
            </tfoot>
		</table>
		<div id="mymodal" class="modal" >
			<div class="modal-dialog" data-backdrop="static">
		        <div v-if="shop!=null" class="modal-content">
		            <div class="modal-header">
		                <button class="close" data-dismiss="modal">&times;</button>
		                <h4 class="modal-title">商铺信息审核</h4>
		            </div>
		            <div class="modal-body">
			            <form class="form-horizontal" v-on:submit.prevent="checked(shop.user)" >
			            	<div class="form-group" >
			                    <label class="col-sm-2 control-label">Logo:</label>
				                <div class="col-sm-10">
				                 	<img class="img-thumbnail" style="height: 40px;" v-bind:src="'/mymall/logo/'+shop.user" />   
				                </div>
			                </div>
			                <div class="form-group">
			                    <label class="col-sm-2 control-label">店名:</label>
				                <div class="col-sm-10">
				                    <label class="control-label text-primary">{{shop.stitle}}</label>
				                </div>
			                </div>
			                <div class="form-group">
			                    <label class="col-sm-2 control-label">主营类别:</label>
				                <div class="col-sm-10">
				                    <label class="control-label text-primary">{{shop.svalue}}</label>
				                </div>
			                </div>
			                <div class="form-group">
			                    <label class="col-sm-2 control-label">法人姓名:</label>
				                <div class="col-sm-10">
				                    <label class="control-label text-primary">{{shop.sname}}</label>
				                </div>
			                </div>
			                <div class="form-group">
			                    <label class="col-sm-2 control-label">证件照片:</label>
				                <div class="col-sm-10">
				                 	<img class="img-thumbnail" style="height: 50px;" v-bind:src="'/mymall/person/'+shop.user" />   
				                </div>
			                </div>
			                <div class="form-group">
			                    <label class="col-sm-2 control-label">传真电话:</label>
				                <div class="col-sm-10">
				                    <label class="control-label text-primary">{{shop.sfax}}</label>
				                </div>
			                </div>
			                <div class="form-group">
			                    <label class="col-sm-2 control-label">营业执照:</label>
				                <div class="col-sm-10">
				                 	<img class="img-thumbnail" style="height: 100px;" v-bind:src="'/mymall/license/'+shop.user" />   
				                </div>
			                </div>
			                <div class="form-group">
				                <div class="col-sm-10 col-sm-offset-2">
				                	<button class="btn btn-default btn-sm" >确定</button>
			                		<button class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
				                </div>
			                </div>
			            </form>
		            </div>
		        </div>
	        </div>
	    </div>
    </div>
    <script type="text/javascript">
    	new Vue({
    		el:'#app',
    		data:{
    			serviceUrl:'http://localhost:8001/myservice',
    			page:0,
    			size:10,
		        step:10,
    			begin:0,
                end:0,
    			role:'0',
    			status:0,
    			pager:{},
    			roleOpts:{},
    			statusOpts:{},
    			shop:null
    		},
    		mounted:function(){
    			this.roleList();
    			this.statusList();
    			this.list(this.page);
    		},
    		methods:{
    			roleList:function(){
    				var self = this;
    				var url = self.serviceUrl+"/admin/role/list";
    				axios.defaults.withCredentials = true;
    				axios.get(url).then(function(res){
    					self.roleOpts=res.data;
    				});
    			},
    			statusList:function(){
    				var self = this;
    				var url = self.serviceUrl+"/admin/status/list";
    				axios.defaults.withCredentials = true;
    				axios.get(url).then(function(res){
    					self.statusOpts=res.data;
    				});
    			},
    			list:function(page){
    				var self = this;
    				self.page = page<0?0:page;
    				var url = self.serviceUrl+"/admin/user/list/"+
    					self.page+"/"+self.size+"/"+self.role+"/"+self.status;
    				axios.defaults.withCredentials = true;
    				axios.get(url).then(function(res){
    					self.pager = res.data;
    					self.begin = Math.floor(self.page/self.step)*self.step+1;
                        if(self.pager.last){
                            self.end = self.pager.totalPages;
                        }else{
                            self.end = Math.floor(self.page/self.step)*self.step+self.step;
                        }
    				});
    			},
    			check:function(shop){
    				var self = this;
    				self.shop = shop;
    				$("#mymodal").modal("show");
    			},
    			checked:function(username){
    				var self = this;
    				var url = self.serviceUrl+"admin/check/shop/"+username;
    				axios.defaults.withCredentials = true;
    				axios.get(url).then(function(res){
    					alert(res.data.message);
    					if(res.data.code==200){
    						$("#mymodal").modal("hide");
    						self.list(self.page);
    					}
    				});
    			}
    		}
    	});
    </script>
</body>
</html>